<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>数据统计</title>
    <link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">

        #memberChart {
            width: 100%;
            height: 400px;
            margin: 30px 0.48%;
            border-radius: 5px;
            float: left;
        }

        #courseChart {
            width: 100%;
            height: 400px;
            margin: 30px 0.48%;
            border-radius: 5px;
            float: left;
        }

        #courseChargeChart {
            width: 100%;
            height: 400px;
            margin: 30px 0.48%;
            border-radius: 5px;
            float: left;
        }

        #trade {
            width: 100%;
            height: 400px;
            margin: 30px 0.48%;
            border-radius: 5px;
            float: left;
        }

    </style>
</head>
<body>


<!-- 用户走势图 -->
<div id="memberChart"></div>

<!-- 课程走势图 -->
<div id="courseChart"></div>

<!-- 课程(免费/收费)走势图 -->
<div id="courseChargeChart"></div>

<!-- 交易走势图 -->
<div id="trade"></div>

<script src="${base}/resources/admin/echarts/echarts.common.min.js"></script>

<style type="text/css">
    .input .powered {
        font-size: 11px;
        text-align: right;
        color: #cccccc;
    }
</style>

<script>

    // 基于准备好的dom，初始化echarts实例
    var memberChart = echarts.init(document.getElementById('memberChart'));
    // 基于准备好的dom，初始化echarts实例
    var courseChart = echarts.init(document.getElementById('courseChart'));
    // 基于准备好的dom，初始化echarts实例
    var courseChargeChart = echarts.init(document.getElementById('courseChargeChart'));
    // 基于准备好的dom，初始化echarts实例
    var trade = echarts.init(document.getElementById('trade'));

    /****** 会员 ********/
    option = {
        backgroundColor: '#ffffff',
        title: {
            text: '会员增长趋势',
            textStyle: {
                fontWeight: 'bold',
                color: '#06a586',
                fontSize: 14
            },
            top: 20,
            left: 10,
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['会员增长数']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '1%',
            right: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                name:'注册时间',
                nameTextStyle:{
                    fontWeight: 'bold',
                    fontSize: 16,
                    color:'#06a586'
                },
                offset:0,
                nameGap:30,
                nameLocation:'middle',
                type: 'category',
                boundaryGap: false,
                data: [[#list memberCountsMap.keySet() as k]'${k?string("yyyy-MM-dd")}',[/#list]]
            }
        ],
        yAxis: [
            {
                name: '会员数',
                nameLocation:'middle',
                type: 'value',
                minInterval: 1,
                min:0,
                max:${memberCountMax}
            }
        ],
        series: [
            {

                type: 'line',
                stack: '总数',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle:{
                            color: '#565656',
                            fontSize  : 14,
                            fontWeight: 200
                        }
                    }
                },
                areaStyle: {normal: {}},
                data: [[#list memberCountsMap.keySet() as k]${memberCountsMap.get(k)},[/#list]],
                lineStyle: {
                    normal: {
                        color: '#06a586',
                        width: 3
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#06a586',
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    memberChart.setOption(option);



    /****** 课程 ********/
    optionCourse = {
        backgroundColor: '#ffffff',
        title: {
            text: '课程开播数',
            textStyle: {
                color: '#D26900',
                fontWeight: 'bold',
                fontSize: 14
            },
            top: 20,
            left: 10,
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['课程开播数']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '1%',
            right: '3%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: [
            {
                name:'开播时间',
                nameTextStyle:{
                    fontWeight: 'bold',
                    fontSize: 16,
                    color:'#D26900'
                },
                offset:0,
                nameGap:30,
                nameLocation:'middle',
                type: 'category',
                boundaryGap: false,
                data: [[#list courseCountsMap.keySet() as k]'${k?string("yyyy-MM-dd")}',[/#list]]
            }
        ],
        yAxis: [
            {
                name: '课程数',
                nameLocation:'middle',
                type: 'value',
                minInterval: 1,
                min:0,
                max:${courseCountMax}
            }
        ],
        series: [
            {

                type: 'line',
                stack: '总数',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        textStyle:{
                            color: '#565656',
                            fontSize  : 14,
                            fontWeight: 200
                        }
                    }
                },
                areaStyle: {normal: {}},
                data: [[#list courseCountsMap.keySet() as k]${courseCountsMap.get(k)},[/#list]],
                lineStyle: {
                    normal: {
                        color: '#D26900',
                        width: 3
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#D26900',
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    courseChart.setOption(optionCourse);

    optionCourseCharge = {
        backgroundColor: '#ffffff',
        title: {
            text: '课程(免费/收费)趋势',
            textStyle: {
                color: '#06a586',
                fontWeight: 200,
                fontSize: 14
            },
            top: 20,
            left: 10,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#F0F0F0'
                },
            }
        },
        legend: {
            data: ['课程免费数量','课程收费数量']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name:'付费/收费',
                nameTextStyle:{
                    fontWeight: 'bold',
                    fontSize: 16,
                    color:'#D26900'
                },
                offset:0,
                nameGap:30,
                nameLocation:'middle',
                type: 'category',
                boundaryGap: false,
                data: [[#list moneyCountMap.keySet() as k]'${k?string("yyyy-MM-dd")}',[/#list]]
            }
        ],
        yAxis: [
            {
                name: '课程数',
                nameLocation:'middle',
                type: 'value',
                minInterval: 1,
                min:0,
                max:${courseCountMax}
            }
        ],
        series: [
            {
                name:'课程免费数量',
                type:'line',
                stack: '总量',
                label: {
                    normal: {}
                },
                areaStyle: {normal: {}},
                data:[[#list noMoneyCountMap.keySet() as pay]${noMoneyCountMap.get(pay)},[/#list]]
            },
            {
                name:'课程收费数量',
                type:'line',
                stack: '总量',
                label: {
                    normal: {}
                },
                areaStyle: {normal: {}},
                data:[[#list moneyCountMap.keySet() as unpay]${moneyCountMap.get(unpay)},[/#list]]
            },
        ]
    };
    courseChargeChart.setOption(optionCourseCharge);

    //交易
    optionCourseCharge = {
        backgroundColor: '#ffffff',
        title: {
            text: '交易成功趋势图',
            textStyle: {
                color: '#06a586',
                fontWeight: 200,
                fontSize: 14
            },
            top: 20,
            left: 10,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                label: {
                    backgroundColor: '#F0F0F0'
                },
            }
        },
        legend: {
            data: ['课程交易数量','提问交易数量', '一元查看答案']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                name:'交易量',
                nameTextStyle:{
                    fontWeight: 'bold',
                    fontSize: 16,
                    color:'#D26900'
                },
                offset:0,
                nameGap:30,
                nameLocation:'middle',
                type: 'category',
                boundaryGap: false,
                data: [[#list moneyCountMap.keySet() as k]'${k?string("yyyy-MM-dd")}',[/#list]]
            }
        ],
        yAxis: [
            {
                name: '课程数',
                nameLocation:'middle',
                type: 'value',
                minInterval: 1,
                min:0,
                max:${max}
            }
        ],
        series: [
            {
                name:'课程交易数量',
                type:'line',
                stack: '总量',
                label: {
                    normal: {}
                },
                areaStyle: {normal: {}},
                data:[[#list courseTradeCountMap.keySet() as pay]${courseTradeCountMap.get(pay)},[/#list]]
            },
            {
                name:'提问交易数量',
                type:'line',
                stack: '总量',
                label: {
                    normal: {}
                },
                areaStyle: {normal: {}},
                data:[[#list questionCountMap.keySet() as unpay]${questionCountMap.get(unpay)},[/#list]]
            },
            {
                name:'一元查看答案',
                type:'line',
                stack: '总量',
                label: {
                normal: {
                show: true,
                position: 'top'
                }
                },
                areaStyle: {normal: {}},
                data:[[#list yiyuanTradeCountMap.keySet() as k]${yiyuanTradeCountMap.get(k)},[/#list]]
            },
        ]
    };
    trade.setOption(optionCourseCharge);

</script>

</body>
</html>